<template>
  <list-page>
    <pub-search
      v-model:searchColumns="searchColumns"
      v-model:search-form="searchForm"
      mask-append-to="table-content"
      @search="search"
    >
      <template #leftBtn>
        <el-button type="primary" @click="add()" :icon="Plus">新增</el-button>
      </template>
    </pub-search>
    <pub-table
      ref="pubTable"
      :column="columns"
      :data="tableData"
      :loading="tableLoading"
    >
      <template v-slot:option="scope">
        <el-button plain type="primary" @click="del(scope.row)">删除</el-button>
      </template>
    </pub-table>
    <pub-pagination
      :total="pagination.total"
      v-model:page="pagination.page"
      v-model:limit="pagination.pageSize"
      @pagination="pagination.change"
    ></pub-pagination>
    <!-- 事项撤销弹窗 -->
    <pub-dialog
      title="事项撤销"
      :hasExtraBtn="true"
      v-model:visible="addDialog"
      width="600px"
    >
      <addCom @cancel="addDialog = false" @success="addSuccess"></addCom>
    </pub-dialog>
    <!--  -->
  </list-page>
</template>
<script>
export default {
  name: 'KJYWH'
}
</script>
<script setup>
import { Plus } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useTable } from '@/hooks/UseTable'
import { get_list, add_kjy, del_kjy } from './api'
import addCom from './components/add.vue'
import { get } from 'lodash-es'
const router = useRouter()
const searchColumns = ref([
  {
    label: '快捷语',
    el: 'Input',
    bind: 'quickName',
    defaultValue: '',
    labelWidth: 80
  },
  {
    label: '关联功能',
    el: 'DictSelect',
    bind: 'relateCode',
    code: 'SPKJYMK',
    defaultValue: '',
    labelWidth: 80
  }
])

const columns = ref([
  { label: '快捷语', prop: 'quickName' },
  {
    label: '关联功能',
    prop: 'relateCode',
    type: 'formatDict',
    formatCode: 'SPKJYMK'
  },
  { label: '添加人', prop: 'realName' },
  { label: '添加时间', prop: 'createDate' },
  { label: '操作', type: 'option', width: 180, fixed: 'right' }
])

let { tableData, search, getList, pagination, searchForm, tableLoading } =
  useTable(get_list)

const addDialog = ref(false)
const add = () => {
  addDialog.value = true
}
const addSuccess = () => {
  addDialog.value = false
  getList()
}
// 删除
const del = row => {
  ElMessageBox.confirm('确认删除选择的记录？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const res = await del_kjy(row.id)
      if (res.succeed) {
        getList()
        ElMessage({
          type: 'success',
          message: res.msg
        })
      }
    })
    .catch(() => {})
}

onMounted(() => {
  getList()
})
</script>
<style lang="scss" scoped></style>
